<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0067)http://www.sohtanaka.com/web-design/examples/multiple-image-viewer/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Multiple Image Viewer w/ Thumbnails</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>.photos {
	BORDER-RIGHT: #f0f0f0 10px solid; PADDING-RIGHT: 10px; BORDER-TOP: #f0f0f0 10px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px auto; OVERFLOW: hidden; BORDER-LEFT: #f0f0f0 10px solid; WIDTH: 400px; PADDING-TOP: 10px; BORDER-BOTTOM: #f0f0f0 10px solid
}
IMG {
	BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.photos IMG.logo {
	DISPLAY: block; MARGIN: 0px auto
}
.photos DIV IMG {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 10px; MARGIN: 20px 0px; PADDING-TOP: 10px; BORDER-BOTTOM: #ddd 1px solid
}
.photos UL.thumbs {
	PADDING-RIGHT: 0px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 390px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.photos UL.thumbs LI {
	BORDER-RIGHT: #ddd 5px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ddd 5px solid; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 10px 0px 0px; OVERFLOW: hidden; BORDER-LEFT: #ddd 5px solid; WIDTH: 110px; PADDING-TOP: 0px; BORDER-BOTTOM: #ddd 5px solid; POSITION: relative; HEIGHT: 100px; TEXT-ALIGN: center
}
.photos UL.thumbs LI:hover {
	BORDER-RIGHT: #888 5px solid; BORDER-TOP: #888 5px solid; FILTER: alpha(opacity=75); BORDER-LEFT: #888 5px solid; BORDER-BOTTOM: #888 5px solid; moz-opacity: .75; opacity: .75
}
.photos UL.thumbs LI IMG {
	LEFT: -145px; POSITION: absolute; TOP: -180px
}
</STYLE>

<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<DIV class=photos><A href="http://www.triumvir3.com/" target=_blank></A> 
<DIV id=photo_1><IMG 
src="images/ARTofWAR_BLK(3).jpg"></DIV>
<DIV id=photo_2 style="DISPLAY: none"><IMG alt="" 
src="images/ARTofWAR_RED.jpg"></DIV>
<DIV id=photo_3 style="DISPLAY: none"><IMG alt="" 
src="images/ARTofWAR_WHT.jpg"></DIV>
<UL class=thumbs>
  <LI><A onclick="switch_product_img('photo_1', 3);" 
  href="javascript:void(0)"><IMG alt="" 
  src="images/ARTofWAR_BLK(3).jpg"></A> </LI>
  <LI><A onclick="switch_product_img('photo_2', 3);" 
  href="javascript:void(0)"><IMG alt="" 
  src="images/ARTofWAR_RED.jpg"></A> </LI>
  <LI><a onClick="switch_product_img('photo_3', 3);" 
  href="javascript:void(0)"><img alt="" 
  src="images/ARTofWAR_WHT.jpg"></a></LI>
</UL>
</DIV>
<P style="FONT: 11px Arial, Helvetica, sans-serif normal; TEXT-ALIGN: center"><A 
href="http://www.sohtanaka.com/web-design/css-multiple-image-viewer-thumbnails/">Multiple 
Image Viewer with Thumbnails</A> by Soh Tanaka</P>
<SCRIPT language=javascript type=text/javascript>
		function switch_product_img(divName, totalImgs) {
			for (var i=1; i<=totalImgs; i++) {
				var showDivName = 'photo_' + i;
				var showObj = document.getElementById(showDivName);
				if (showDivName == divName)
					showObj.style.display = 'block';
				else
					showObj.style.display = 'none';
				}
			}
		</SCRIPT>
</BODY></HTML>
